<template>
	<view class="item_header">
		<image lazy-load class="avatar_image" :src="avatar_url" mode="scaleToFill"></image>
		<text class="nick_name">{{nickname }}</text>
		<view class="right">
			<slot name="right">
				<view class="cloes">
					<text class="iconfont icon-guanbi" @click="removeSlef"></text>
				</view>
			</slot>
		</view>

	</view>
</template>

<script>
	export default {
		name: "articleHeader",
		props: ['avatar_url', 'nickname'],
		data() {
			return {};
		},
		methods: {
			removeSlef() {
				this.$emit('removeSlef')
			}
		},
	};
</script>

<style lang="scss">
	.item_header {
		position: relative;
		width: 100%;
		height: 90rpx;
		align-items: center;
		flex-shrink: 0;
		padding-bottom: 10rpx;

		.avatar_image {
			width: 70rpx;
			height: 70rpx;
			border-radius: 50rpx;
		}

		.nick_name {
			font-size: 28rpx;
			padding-left: 15rpx;
		}

		.right {
			position: absolute;
			right: 20rpx;
			top: 0rpx;
			height: 100%;
			.cloes{
				height: 100%;
				align-items: center; 
			}
		}
	}
</style>
